<template>
    <div>
        <div>
            <div class="dl_c">
                <div class="dl_wrap">
                    <div class="dl_logo"></div>
                    <div class="dl_phone"></div>
                    <div class="dl_m">
                        <div class="dl_info"></div>
                        <div class="dl_btn">
                            <a class="andr" href="#">下载Android版</a>
                            <a class="ios" href="#">下载iOS版</a>
                        </div>
                        <div class="dl_code">
                            <img src="https://www.ireader.com/static/images/khd/qrcode.png" width="130" height="130">
                            <br>
                            扫描二维码直接下载
                        </div>
                    </div>
                </div>
            </div>    
        </div>
        <my-footer></my-footer>
        <my-top></my-top>
    </div>
</template>

<script>
import MyFooter from '../components/MyFooter'
import MyTop from '../components/MyTop'
export default {
    components:{MyFooter,MyTop}
}
</script>

<style scoped>
*{
  box-sizing: content-box;
  list-style: none;
  color: #9e9e9e;
  font: 12px/20px "Microsoft Yahei", arial, sans-serif;
  font-weight: normal;
}
a {
  text-decoration: none;
  outline: none;
  font-family: "Microsoft Yahei", arial, sans-serif;
  color: #9e9e9e;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  /* 让图片(行内块元素)与同一行中的内容竖直居中对齐 */
  vertical-align: middle;
}
input {
  outline: none;
}
h2,
h3 {
  font-style: normal;
  font-weight: normal;
}
s {
  background: url(https://pweb.d.zhangyue01.com/static/images/common/icon.png)
    no-repeat;
}
.dl_c{
		background: url(//www.ireader.com/static/images/download/bg_pc.jpg) no-repeat 0 bottom;
	    background-size: 100% 50%;
	    overflow: hidden;
		height: 780px;
}
.dl_wrap{
	width: 784px;
	margin: 0 auto;
}
.dl_logo{
	height: 49px;
	margin: 54px 0;
	background: url(https://www.ireader.com/static/images/download/logo.png) no-repeat 0 bottom;
	background-size: 312px 49px;
}
.dl_phone {
    width: 301px;
    height: 489px;
    background: url(//www.ireader.com/static/images/download/phone.png) no-repeat 0 bottom;
    background-size: contain;
    float: left;
}
.dl_m {
    width: 425px;
    float: right;
}
.dl_info {
    height: 244px;
    margin-top: 77px;
    background: url(//www.ireader.com/static/images/download/info.png) no-repeat center;
    background-size: 381px 234px;
}
.dl_btn {
    height: 47px;
    margin: 30px 0;
    overflow: hidden;
}
.dl_btn .andr {
    background-image: url(//www.ireader.com/static/images/download/icon_android.png);
    background-position: 20px center;
    background-size: 28px 34px;
    float: left;
}
.dl_btn .ios {
    background-image: url(//www.ireader.com/static/images/download/icon_ios.png);
    background-position: 30px 5px;
    background-size: 26px 32px;
    float: right;
}
.dl_btn a {
    width: 170px;
    height: 47px;
    padding-left: 20px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 47px;
    text-decoration: none;
    border-radius: 25px;
    background-color: #da463a;
    background-repeat: no-repeat;
    display: block;
}
.dl_code {
    width: 130px;
    margin: 0 0 40px auto;
    text-align: center;
    font-size: 13px;
    color: #000;
}

/* 底部 */
.download{
    width: 348px;
    height: 138px;
    background: #e6e6e6;
    border-radius: 10px;
    margin: 40px auto 30px;
    padding: 0 46px;
}
.download h3{
    font-size: 18px;
    text-align: center;
    color: #212121;
    padding: 22px 0 24px 0;
}
.download .loadL{
    width: 160px;
    height: 40px;
    border-radius: 5px;
    background-color: #212121;
}
.download span{
    float: left;
    width: 40px;
    height: 40px;
    border-right: 1px solid #f7f7f7;
}
.download  .loadL s{
    display: block;
    width: 21px;
    height: 23px;
    background-position: -2px -92px;
    margin: 8px auto 0;
}
.download p{
    float: left;
    width: 118px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.download .loadR{
    float: right;
    width: 160px;
    height: 40px;
    border-radius: 5px;
    background-color: #4caf50;
    margin-top: -40px;
}

.download .loadR s{
    display: block;
    width: 21px;
    height: 26px;
    background-position: -24px -92px;
    margin: 8px auto 0;
}
.aboutcomp{
    text-align: center;
    font-size: 12px;
    color: #9e9e9e;
}
.aboutcomp .link{
    margin-bottom: 20px;
    margin: 0 auto;
}
.aboutcomp .link a{
    font-size: 14px;
}
.aboutcomp a{
    margin: 0 8px;
}
</style>